<template>
  <div class="u_item">
    <div class="img">
      <div class="play" @click="playTrack">
        <van-icon name="pause-circle" v-if="isPlay" />
        <van-icon name="play-circle" v-else />
      </div>
      <div class="mask"></div>
      <img v-lazy="img" alt="" />
    </div>
    <div class="info" @click="goTarck">
      <div class="des">{{ title }}</div>
      <div class="js">{{des}}</div>
      <div class="count">
        <div class="playCount">
          <i class="font_family icon-Headset-2"></i>&nbsp;&nbsp;{{
            countInfo.playCount | getCount
          }}
        </div>
        <div class="dur">
          <van-icon name="clock-o" />&nbsp;&nbsp;{{ duration | formatTime }}
        </div>
      </div>
      <div class="ting" v-if="!playPath" @click="clickTing">试听</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "UItem",
  data() {
    return {};
  },
  props: {
    id: {
      type: Number,
    },
    img: {
      type: String,
    },
    title: {
      type: String,
    },
    des: {
      type: String,
    },
    countInfo: {
      type: Object,
    },
    playPath: {
      tyeo: String,
    },
    duration: {
      type: Number,
    },
    isPlay: {
      type: Boolean,
    },
  },
  methods: {
    clickTing() {
      Toast({
        message: "充值收听",
        icon: "close",
      });
    },

    goTarck() {
      this.$router.push("/sound/" + this.id);
    },
    playTrack() {
      if (!this.playPath) {
        Toast({
          message: "会员充值收听",
          
        });
        return
      }
      let isPlay = !this.isPlay;
      this.$emit("play-track", {
        id: this.id,
        isPlay: isPlay,
        playPath: this.playPath,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.u_item {
  display: flex;
  .img {
    margin-right: 15px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    position: relative;
    > img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -12.5px;
      margin-left: -12.5px;
      z-index: 100;
      width: 25px;
      height: 25px;
      i {
        display: block;
        font-size: 25px;
        color: #fff;
      }
    }
    .mask {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);

      z-index: 10;
      border-radius: 50%;
    }
  }
  .info {
    width: 220px;
    .des,
    .js {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .des {
      font-size: 16px;
      color: #40404c;
      margin-bottom: 5px;
    }
    .js {
      font-size: 13px;
      color: #999;
      height: 15px;
      line-height: 15px;
      margin-bottom: 14px;
    }
    .count {
      font-size: 12px;
      color: #999;
      display: flex;
      .playCount {
        margin-right: 15px;
      }
      .dur {
        margin-right: 15px;
      }
    }
    .ting {
      display: inline-block;
      padding: 2px 5px;
      font-size: 11px;
      border: 0.5px solid #13c85e;
      color: #13c85e;
    }
  }
}
</style>

